<template>
  <div id="homePage">
    <div class="top" v-scolltop="{vm:this}">
      <div class="topbar" v-scollbartop="{vm:this}">
        <span class="left">
          <span class="topTitle">
            中共南京市秦淮区委员会
            <i class="iconfont iconicon--copy"></i>
          </span>
        </span>
        <div :class="{samllbar:isSamllbar}">
          <span class="information"></span>
          <span class="serach"></span>
        </div>
      </div>
      <div class="searchBox">
        <div class="searchBox-value">
          <span>酸奶</span>
          <span class="searchBox-search"></span>
        </div>
      </div>
      <div class="keyword">
        <span v-for="{id,title} in keyword" :key="id">{{title}}</span>
      </div>
    </div>

    <div class="LBfirst">
      <swiper :options="swiperOption">
        <swiper-slide v-for="{id,imgUrl} in LBfirstImages" :key="id">
          <img :src="imgUrl" />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>

    <div class="navs">
      <div class="navs-value">
        <div class="navs-title" v-for="{id,imgUrl,title} in navs" :key="id">
          <img :src="imgUrl" />
          <p>{{title}}</p>
        </div>
      </div>
      <div class="headlines">
        <a href>
          <i></i>
          <span>
            <b>白色情人节</b>
            用美食表白ta, 享69减20!
          </span>
        </a>
      </div>
    </div>

    <div class="LBsecond">
      <swiper :options="swiperOption">
        <swiper-slide v-for="{id,imgUrl} in LBsecondImags" :key="id">
          <img :src="imgUrl" />
        </swiper-slide>
        <template #pagination>
          <div class="swiper-pagination" slot="pagination"></div>
        </template>
      </swiper>
    </div>

    <div class="Discount-zone">
      <p>优惠专区</p>
      <div class="Discount-items">
        <img src="../../public/uploads/210d14e482387332.png" />
        <img src="../../public/uploads/97a549cc49983c13.png" />
      </div>
      <div class="Discount-itemsn">
        <div class="Discount-value" v-for="{id,imgUrl,title1,title2} in Discountzone" :key="id">
          <p class="Discount-title1">{{title1}}</p>
          <p class="Discount-title2">{{title2}}</p>
          <img :src="imgUrl" />
        </div>
      </div>
    </div>

    <div class="Flash-sale">
      <p>
        <span class="Flashsale-title">限时抢购</span>
        <span class="Flashsale-link">更多</span>
      </p>
      <div class="Flashsale-slide">
        <div
          class="Flashsale-slideRight"
          v-for="{id,imgUrl,imgUrl1,title1,title2,title3,title4}
        in Flashsale"
          :key="id"
        >
          <div class="Flashsaleimage">
            <img :src="imgUrl" />
          </div>
          <div class="Flashsaleimage2">
            <img :src="imgUrl1" />
          </div>
          <div class="seckill">{{title1}}</div>
          <div class="describe">{{title2}}</div>
          <div class="Flashsale-content">
            <div class="Flashsale-samlltitle">
              <span class="Flashsale-samlltitle1">{{title3}}</span>
              <span class="Flashsale-samlltitle2">{{title4}}</span>
            </div>
            <div class="Flashsale-titleimage"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="LBthird">
      <swiper :options="swiperOption">
        <swiper-slide v-for="{id,imgUrl} in LBthirdImages" :key="id">
          <img :src="imgUrl" />
        </swiper-slide>
        <template #pagination>
          <div class="swiper-pagination" slot="pagination"></div>
        </template>
      </swiper>
    </div>

    <div
      class="shops"
      v-infinite-scroll="getShop"
      infinite-scroll-disabled="busy"
      infinite-scroll-distance="60"
    >
      <p class="Nearbyshops">附近店铺</p>
      <div class="Comprehensiveranking">
        <p class="Comprehensiveranking-content">
          <span class="Comprehensiveranking-value">综合排行</span>
          <span>销量</span>
          <span>距离</span>
          <span class="screen">筛选</span>
        </p>
        <p class="privilege">
          <span>减免运费</span>
          <span>高优门店</span>
          <span>叠加红包</span>
          <span>首单优惠</span>
        </p>
      </div>
      <!-- 店铺列表 -->
      <div
        class="Shoplist"
        v-for="{id,imgUrl,title,title1,title2,title3,title4,
      title5,title6,title7,title8,title9,title10,title11}
       in shop"
        :key="id"
      >
        <img :src="imgUrl" />
        <div class="Shoplist-link">
          <router-link to="/CommodityDetails" class="shopTitle">{{title}}</router-link>
          <div class="Shop-star">
            <!-- 星星 -->
            <p class="Shop-star-p">
              <span class="Shop-star-s">
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <small>{{title1}}</small>
                <small class="Shop-star-t">{{title2}}</small>
              </span>
              <span class="Shop-star-r">
                <small>{{title3}}</small>
                <i></i>
                <small>{{title4}}</small>
              </span>
            </p>
            <!-- 起送 -->
            <p class="Shopintroduction1">
              <span>
                {{title5}}
                <i>|</i>
                {{title6}}
              </span>
              <span class="Shopintroduction1-note">达达专送</span>
            </p>
            <!-- 领券 -->
            <p class="Shopintroduction2">
              <span>{{title7}}</span>
              <span>{{title8}}</span>
              <span>{{title9}}</span>
            </p>
            <!-- 返礼 -->
            <p class="Shopintroduction3">
              <span class="Shopintroduction3-content1">返礼</span>
              <span class="Shopintroduction3-content2">{{title10}}</span>
            </p>
            <!-- 附近商家 -->
            <p class="Shopintroduction4">
              <i></i>
              <span>{{title11}}</span>
            </p>
          </div>
        </div>
      </div>
      <img style="width:20px" v-show="busy" src="../../public/uploads/loading_logo.gif" />
    </div>
    <!-- 底部 -->
    <div class="footerNavs"></div>
  </div>
</template>

<script>
export default {
  directives: {
    scolltop(el, binding) {
      const { vm } = binding.value;
      window.addEventListener('scroll', () => {
        const top = document.documentElement.scrollTop || document.body.scrollTop;
        const alp = top / 120;
        if (1 - alp >= 0) {
          vm.topBgColor = 1 - alp;
        } else {
          vm.topBgColor = 0;
        }
      });
    },
    scollbartop(el, binding) {
      const { vm } = binding.value;
      window.addEventListener('scroll', () => {
        const top = document.documentElement.scrollTop || document.body.scrollTop;
        vm.isSamllbar = top > 5;
      });
    },
  },
  data() {
    return {
      busy: true,
      swiperOption: {
        autoplay: true,
        pagination: {
          el: '.swiper-pagination',
        },
      },
      topBgColor: 1,
      topBarBgColor: 0,
      navs: [],
      isSamllbar: false,
      show: true,
      keyword: [],
      LBfirstImages: [],
      LBsecondImags: [],
      Discountzone: [],
      Flashsale: [],
      LBthirdImages: [],
      shop: [],
    };
  },
  created() {
    this.getNavs();
    this.getkeyword();
    this.getLBfirstImages();
    this.getLBsecondImags();
    this.getDiscountzone();
    this.getFlashsale();
    this.getLBthirdImages();
    this.getShop();
  },
  methods: {
    scroll() {
      const top = document.target.scrollTop;
      this.show = top > 78;
    },
    async getNavs() {
      const {
        data: { data },
      } = await this.api.getNavs();
      this.navs = data;
    },
    async getkeyword() {
      const {
        data: { data },
      } = await this.api.getkeyword();
      this.keyword = data;
    },
    async getLBfirstImages() {
      const {
        data: { data },
      } = await this.api.getLBfirstImages();
      this.LBfirstImages = data;
    },
    async getLBsecondImags() {
      const {
        data: { data },
      } = await this.api.getLBsecondImags();
      this.LBsecondImags = data;
    },
    async getDiscountzone() {
      const {
        data: { data },
      } = await this.api.getDiscountzone();
      this.Discountzone = data;
    },
    async getFlashsale() {
      const {
        data: { data },
      } = await this.api.getFlashsale();
      this.Flashsale = data;
    },
    async getLBthirdImages() {
      const {
        data: { data },
      } = await this.api.getLBthirdImages();
      this.LBthirdImages = data;
    },
    getShop() {
      this.busy = true;
      setTimeout(async () => {
        const {
          data: { data },
        } = await this.api.getShop();
        this.shop.push(...data);
        this.busy = false;
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
#homePage {
  background-color: #f6f6f6;
  .top {
    height: 119px;
    background: url(../../public/uploads/1a56f6dbf57c450c.jpg) no-repeat;
    .topbar {
      height: 44px;
      width: 750px;
      background: url(../../public/uploads/77df8fce62c477f5.png) no-repeat;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 100;
      display: flex;
      .left {
        display: inline-block;
        height: 40px;
        margin-left: 13px;
        background: url(../../public/uploads/site.png) no-repeat 0px 15px;
        background-size: 14px;
        .topTitle {
          display: inline-block;
          line-height: 44px;
          font-size: 18px;
          color: #fff;
          text-align: left;
          margin-left: 20px;
          .iconicon--copy {
            margin-left: 5px;
          }
        }
      }
      .samllbar {
        margin-left: 70px;
        transition: 1s;
      }
      > div {
        width: 88px;
        margin-left: 100px;
        transition: 1s;
        .information {
          display: inline-block;
          width: 20px;
          height: 44px;
          line-height: 44px;
          background: url(../../public/uploads/news.png) no-repeat 50%;
          background-size: 20px;
        }
        .serach {
          display: inline-block;
          width: 40px;
          height: 44px;
          line-height: 44px;
          background: url(../../public/uploads/serach.png) no-repeat 50%;
          background-size: 20px;
        }
        .show {
          margin-left: 20px;
        }
      }
    }
    .searchBox {
      width: 355px;
      margin: 0 auto;
      padding-top: 50px;
      padding-bottom: 9px;
      .searchBox-value {
        width: 355px;
        height: 34px;
        background: white;
        border-radius: 68px;
        text-align: center;
        line-height: 34px;
        position: relative;
        > span {
          text-align: center;
          color: #999;
          font-size: 14px;
        }
        .searchBox-search {
          display: inline-block;
          width: 14px;
          height: 14px;
          background: url(../../public/uploads/search.png);
          background-size: 14px auto;
          position: absolute;
          left: 38%;
          top: 35%;
        }
      }
    }
    .keyword {
      width: 357px;
      height: 15px;
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
      > span {
        height: 13.6px;
        display: inline-block;
        font-size: 12px;
        color: #fff;
        padding: 0 8px;
      }
    }
  }
  .LBfirst {
    height: 115px;
    img {
      width: 100%;
    }
  }
  .navs {
    background-color: #fff;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    .navs-value {
      height: 160px;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
      .navs-title {
        width: 75px;
        height: 80px;
        text-align: center;
        img {
          display: block;
          margin: 0 auto;
          margin-top: 15px;
          width: 40px;
        }
        p {
          font-size: 12px;
        }
      }
    }
    .headlines {
      height: 30px;
      a {
        text-decoration: none;
        color: #555;
        font-size: 12px;
        position: relative;
        i {
          background: url("/uploads/headlines.png") no-repeat 10px 10px;
          display: inline-block;
          width: 50px;
          height: 60px;
          background-size: 80%;
          position: absolute;
          top: -10px;
        }
        span {
          margin-left: 55px;
        }
      }
    }
  }
  .LBsecond {
    width: 355px;
    margin: 10px auto;
    img {
      width: 100%;
      border-radius: 8px;
    }
  }
  .Discount-zone {
    width: 100%;
    height: 318px;
    padding-bottom: 15px;
    background-color: rgb(255, 255, 255);
    border-radius: 16px;
    > p {
      padding-top: 15px;
      padding-left: 10px;
      padding-right: 10px;
      font-size: 20px;
      color: #333;
      text-align: left;
      font-weight: 700;
    }
    .Discount-items {
      width: 355px;
      height: 129px;
      padding: 10px 10px 0;
      background: #fff;
      display: flex;
      justify-content: space-between;
      > img {
        height: 129px;
      }
    }
    .Discount-itemsn {
      width: 100%;
      height: 135px;
      margin-top: 5px;
      display: flex;
      justify-content: space-around;
      .Discount-value {
        width: 85px;
        height: 125px;
        background: #fafafa;
        border-radius: 4px;
        margin-top: 5px;
        .Discount-title1 {
          text-align: center;
          font-size: 14px;
          margin-top: 10px;
          margin-bottom: 3px;
          color: #ff5757;
        }
        .Discount-title2 {
          color: rgb(51, 51, 51);
          font-size: 12px;
          text-align: center;
        }
        img {
          display: block;
          width: 60px;
          height: 60px;
          margin: 10px 15px;
        }
      }
    }
  }
  .Flash-sale {
    width: 100%;
    height: 255px;
    margin-top: 10px;
    background-color: rgb(255, 255, 255);
    border-radius: 16px;
    p {
      padding-top: 15px;
      padding-left: 10px;
      padding-right: 10px;
      display: flex;
      justify-content: space-between;
      .Flashsale-title {
        font-weight: 700;
        font-size: 20px;
      }
      .Flashsale-link {
        display: inline-block;
        width: 24px;
        height: 12px;
        margin-top: 8px;
        color: #333;
        font-size: 12px;
        line-height: 1;
        background: url(../../public/uploads/R.png) 100% no-repeat;
        background-size: auto 12px;
        padding-right: 10px;
      }
    }
    .Flashsale-slide {
      height: 196px;
      padding-top: 10px;
      white-space: nowrap;
      overflow-x: scroll;
      display: flex;
      .Flashsale-slideRight {
        width: 105px;
        height: 182px;
        margin-left: 10px;
        position: relative;
        .Flashsaleimage {
          width: 105px;
          height: 105px;
          > img {
            width: 105px;
            background-color: rgba(0, 0, 0, 0.03);
          }
        }
        .Flashsaleimage2 {
          width: 24px;
          height: 24px;
          border-radius: 12px;
          background: green;
          position: absolute;
          left: 5px;
          top: 5px;
          > img {
            width: 24px;
            border-radius: 12px;
          }
        }
        .seckill {
          width: 50px;
          height: 14px;
          padding: 0 3px;
          background-image: linear-gradient(
            135deg,
            rgb(255, 125, 125) 0%,
            rgb(255, 81, 56) 100%
          );
          color: rgb(255, 255, 255);
          font-size: 10px;
          text-align: center;
          border-top-right-radius: 4px;
          border-bottom-left-radius: 4px;
          position: absolute;
          top: 91px;
          left: 0px;
        }
        .describe {
          padding-top: 5px;
          width: 105px;
          height: 32px;
          font-size: 12px;
          line-height: 16px;
          text-align: left;
          -webkit-line-clamp: 2;
          overflow: hidden;
          -webkit-box-orient: vertical;
          white-space: normal;
          text-overflow: ellipsis;
        }
        .Flashsale-content {
          width: 105px;
          height: 32px;
          margin-top: 3px;
          padding-bottom: 3px;
          display: flex;
          justify-content: space-between;
          .Flashsale-samlltitle {
            height: 32px;
            width: 39px;
            .Flashsale-samlltitle1 {
              color: rgb(255, 30, 25);
              font-size: 14px;
              font-weight: bold;
              line-height: 17px;
              display: block;
            }
            .Flashsale-samlltitle2 {
              color: rgb(153, 153, 153);
              font-size: 12px;
              font-weight: normal;
              line-height: 15px;
              text-decoration-line: line-through;
              display: block;
            }
          }
          .Flashsale-titleimage {
            width: 26px;
            height: 26px;
            background: url(../../public/uploads/seckillQiang.3882994a.png)
              no-repeat;
            background-size: 100%;
          }
        }
      }
    }
  }
  .LBthird {
    width: 355px;
    margin: 10px auto;
    img {
      width: 100%;
      border-radius: 8px;
    }
  }
  .shops {
    width: 100%;
    background-color: rgb(255, 255, 255);
    border-radius: 16px 16px 0 0;
    .Nearbyshops {
      padding: 15px 10px 7px 10px;
      font-size: 20px;
      font-weight: 700;
      color: #333;
      text-align: left;
    }
    .Comprehensiveranking {
      width: 100%;
      height: 89px;
      .Comprehensiveranking-content {
        padding: 15px 10px 10px;
        > span {
          padding-right: 25px;
        }
        .Comprehensiveranking-value {
          color: #47b34f;
        }
        .screen {
          padding-right: 12px;
          float: right;
          background: url(../../public/uploads/screen.png) no-repeat 100%;
          background-size: 12px auto;
        }
      }
      .privilege {
        height: 32px;
        padding: 6px 10px 6px 5px;
        > span {
          display: inline-block;
          width: 85px;
          margin-left: 5px;
          height: 32px;
          text-align: center;
          color: #333;
          font-size: 13px;
          background: #f8f8f8;
          line-height: 32px;
        }
      }
    }
    .Shoplist {
      padding: 20px 10px;
      display: flex;
      img {
        width: 58px;
        height: 58px;
        margin-right: 10px;
      }
      .Shoplist-link {
        width: 285px;
        .shopTitle {
          color: rgb(51, 51, 51);
          font-weight: 700;
          text-decoration: none;
        }
        .Shop-star {
          margin-top: 5px;
          .Shop-star-p {
            height: 15px;
            display: flex;
            justify-content: space-between;
            .Shop-star-s {
              display: inline-block;
              width: 125px;
              text-align: left;
              line-height: 15px;
              display: flex;
              align-items: center;
              > i {
                display: inline-block;
                width: 10px;
                height: 10px;
              }
              > i:nth-child(1) {
                background: url(../../public/uploads/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png)
                  no-repeat;
                background-size: 50px;
              }
              > i:nth-child(2) {
                background: url(../../public/uploads/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png)
                  no-repeat;
                background-size: 50px;
              }
              > i:nth-child(3) {
                background: url(../../public/uploads/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png)
                  no-repeat;
                background-size: 50px;
              }
              > i:nth-child(4) {
                background: url(../../public/uploads/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png)
                  no-repeat;
                background-size: 50px;
              }
              > i:nth-child(5) {
                background: url(../../public/uploads/hrjvUPrT8QWt3GBv5Zq9iAAAAABJRU5ErkJggg__.png)
                  no-repeat -10px 0px;
                background-size: 50px;
              }
              > small {
                display: inline-block;
                color: #ffa14e;
                font-size: 10px;
                line-height: 10px;
                height: 9.6px;
                padding-left: 3px;
              }
              .Shop-star-t {
                display: inline-block;
                font-size: 11px;
                color: #666;
                line-height: 14px;
                margin-left: 5px;
                height: 14px;
              }
            }
            .Shop-star-r {
              display: inline-block;
              display: flex;
              align-items: center;
              > small {
                display: inline-block;
                font-size: 11px;
                color: #666;
                line-height: 14px;
                height: 14px;
              }
              > i {
                width: 1px;
                height: 8px;
                background: #f5f5f5;
                margin: 0 5px;
                display: inline-block;
              }
            }
          }
          .Shopintroduction1 {
            margin-top: 5px;
            height: 15px;
            display: flex;
            justify-content: space-between;
            span {
              color: rgb(102, 102, 102);
              font-size: 11px;
              > i {
                color: rgb(245, 245, 245);
                font-family: PingFangSC-Regular;
                font-size: 11px;
                margin-left: 4px;
                margin-right: 4px;
                font-style: normal;
              }
            }
            .Shopintroduction1-note {
              padding: 0 3px;
              border: 1px rgb(76, 156, 255) solid;
              border-top-left-radius: 4px;
              border-top-right-radius: 1px;
              border-bottom-left-radius: 1px;
              border-bottom-right-radius: 4px;
              color: rgb(76, 156, 255);
              font-size: 10px;
            }
          }
          .Shopintroduction2 {
            height: 24px;
            margin-bottom: 5px;
            margin-top: 5px;
            > span {
              color: rgb(255, 30, 25);
              display: inline-block;
              padding: 1px 2px;
              margin-right: 5px;
              margin-top: 5px;
              border: 1px solid rgb(252, 140, 138);
              font-size: 10px;
              border-radius: 4px 1px 4px 1px;
            }
          }
          .Shopintroduction3 {
            height: 15px;
            line-height: 15px;
            display: flex;
            .Shopintroduction3-content1 {
              display: inline-block;
              color: rgb(255, 255, 255);
              background-image: linear-gradient(
                135deg,
                rgb(255, 125, 125) 0%,
                rgb(255, 81, 56) 100%
              );
              border-top-left-radius: 4px;
              border-top-right-radius: 1px;
              border-bottom-left-radius: 1px;
              border-bottom-right-radius: 4px;
              height: 14px;
              font-size: 10px;
              padding-left: 3px;
              padding-right: 3px;
              margin-right: 5px;
            }
            .Shopintroduction3-content2 {
              color: rgb(102, 102, 102);
              font-size: 11px;
            }
          }
          .Shopintroduction4 {
            margin-top: 20px;
            height: 13.6px;
            display: flex;
            > i {
              display: inline-block;
              width: 14px;
              height: 14px;
              margin-right: 4px;
              background: url(../../public/uploads/house.png) no-repeat;
              background-size: 11px auto;
            }
            > span {
              font-size: 11px;
              color: #666;
              line-height: 14px;
            }
          }
        }
      }
    }
  }
}
</style>
